<script setup>
import ElCardBg from '@/components/ElCardBg.vue';
import { ref, onMounted } from 'vue'
import { categoryPageList, updateCategory, deleteCategory, saveCategory } from '@/api/article'
import { ElMessage, ElMessageBox } from 'element-plus';
const pageParams = ref({
  page: 1,
  limit: 8,
  name: ''
})
const categoryList = ref([])
const total = ref(0)
const getCategoryList = async () => {
  const res = await categoryPageList(pageParams.value)
  categoryList.value = res.data.records
  total.value = res.data.total
}
onMounted(() => {
  getCategoryList()
})

const handleCurrentChange = () => {
  getCategoryList()
}

const search = () => {
  getCategoryList()
}

const reset = () => {
  pageParams.value.name = ''
  getCategoryList()
}

const isDialog = ref(false)

const title = ref('')

const categoryName = ref('')

const currentId = ref(null)

const operation = async (id) => {
  isDialog.value = true
  if (id) {
    currentId.value = id
    // 修改
    title.value = '修改分类'
    // 回显数据
    const category = categoryList.value.filter(item => item.id === id)[0]
    categoryName.value = category.name
  } else {
    // 新增
    title.value = '新增分类'
  }
}

const handleOk = async () => {
  let message = '新增'
  if (currentId.value) {
    // 修改
    message = '修改'
    await updateCategory(currentId.value, categoryName.value)
  } else {
    // 新增
    await saveCategory(categoryName.value)
  }
  onClose()
  getCategoryList()
  ElMessage.success(message + '成功')
}

const del = (id) => {
  ElMessageBox.confirm("您确定要删除吗?", "删除标签",
    {
      cancelButtonText: '取消',
      confirmButtonText: '确认',
      type: 'error',
      buttonSize: 'small',
      showClose: false
    }
  ).then(async () => {
    await deleteCategory(id)
    getCategoryList()
    ElMessage.success('删除成功')
  })
}

const onClose = () => {
  categoryName.value = ''
  isDialog.value = false
  currentId.value = null
}
</script>
<template>
  <ElCardBg title="分类管理">
    <template v-slot:content>
      <el-row>
        <el-col :span="6" style="margin-right: 10px;">
          <el-form-item label="分类名称：" prop="">
            <el-input placeholder="请输入分类名称" v-model="pageParams.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" style="width: 80px;" @click="search">
            <i class="iconfont icon-sousuo1" style="margin-right: 6px;font-size: 18px;"></i>
            <span style="margin-right: 30px;">搜索</span>
          </el-button>
          <el-button type="info" style="width: 80px;" @click="reset">
            <i class="iconfont icon-zhongzhi" style="margin-right: 8px;font-size: 14px;"></i>
            <span style="margin-right: 30px;">重置</span>
          </el-button>
        </el-col>
        <el-col :span="12" style="display: flex;justify-content: end;margin-left: 30px;">
          <el-button type="primary" style="width: 100px;" @click="operation(null)">
            <i class="iconfont icon-xinzeng" style="font-size: 14px;"></i>
            <span style="margin-right: 28px;">新增分类</span>
          </el-button>
        </el-col>
      </el-row>
      <!-- 表格区域 -->
      <el-row style="margin-top: 10px;">
        <el-table height="458px" :data="categoryList" style="width: 100%" :cell-style="{ textAlign: 'center' }"
          :header-cell-style="{ textAlign: 'center' }">
          <el-table-column property="id" label="序号" width="160"></el-table-column>
          <el-table-column property="name" label="分类" width="230">
            <template #default="scope">
              <div class="category-box">
                <span class="span">{{ scope.row.name }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="count" label="统计" width="200" />
          <el-table-column prop="createTime" label="创建时间" width="220"></el-table-column>
          <el-table-column prop="updateTime" label="修改时间" width="220"></el-table-column>
          <el-table-column label="操作" width="200">
            <template #default="scope">
              <!-- 操作按钮 -->
              <div class="div" v-permissionDirective style="display: flex;margin-left: 35px;">
                <el-button type="primary" class="centet-icon" @click="operation(scope.row.id)">
                  <i class="iconfont icon-xiugai" style="margin: 0 auto;"></i>
                </el-button>
                <el-button @click="del(scope.row.id)" type="danger"
                  style="display: flex;align-items: center;margin-left: 3px;">
                  <i class="iconfont icon-shanchu" style="margin: 0 auto;"></i>
                </el-button>
              </div>
            </template>
          </el-table-column>
          <!-- 空状态 -->
          <template v-slot:empty>
            <el-empty description="暂无数据" />
          </template>
        </el-table>
      </el-row>
      <!-- 分页条区域 -->
      <el-pagination class="pagination" hide-on-single-page :default-page-size="8" background :total="total"
        layout="total, prev, pager, next, jumper" v-model:current-page="pageParams.page"
        @current-change="handleCurrentChange"></el-pagination>
      <!-- 添加和修改弹层 -->
      <el-dialog :title="title" width="300px" v-model="isDialog" @close="onClose">
        <el-form-item label="分类" prop="" style="margin-top: 10px;">
          <el-input placeholder="" v-model="categoryName" style="width: 220px;"></el-input>
        </el-form-item>
        <template #footer>
          <div class="dialog-footer">
            <el-button size="small" @click="onClose">取 消</el-button>
            <el-button v-permissionDirective size="small" type="primary" @click="handleOk">确 定</el-button>
          </div>
        </template>
      </el-dialog>
    </template>
  </ElCardBg>
</template>
<style lang="scss" scoped>
.category-box {
  width: 130px;
  height: 30px;
  margin-left: 35px;
  border-radius: 10px;
  transition: all 0.4s ease;

  .span {
    color: #626a73;
    line-height: 30px;
  }

  &:hover {
    background-color: #aac9fa;
    cursor: pointer;

  }
}

.pagination {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: end;
  margin-right: 67px;
}
</style>